
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.search-from {
    width: 200px;
    margin: 10px 20px 0 0;
}
.from-item {
    flex: 1;
    margin: 0 10px;
}
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.noData{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
    border-top: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
    color: #CCC;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 待 发 货 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input clearable v-model="query.orderNo" placeholder="订单号" class="search-from"></el-input>
                <el-input clearable v-model="query.name" placeholder="收件人姓名" class="search-from"></el-input>
                <el-input clearable v-model="query.phone" placeholder="手机号" class="search-from"></el-input>
                <el-input clearable v-model="query.parentMobile" placeholder="推荐人" class="search-from"></el-input>
                <el-select clearable class="search-from" v-model="query.orderCategory" placeholder="订单类别">
                    <el-option :value="10" label="礼包"></el-option>
                    <el-option :value="20" label="商品"></el-option>
                    <el-option :value="30" label="补货"></el-option>
                    <el-option :value="40" label="单品"></el-option>
                </el-select>
                <!-- <el-date-picker
                v-model="query.payOnBegin"
                class="search-from"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="支付时间——开始">
                </el-date-picker>
                <el-date-picker
                class="search-from"
                v-model="query.payOnEnd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="支付时间——结束">
                </el-date-picker> -->
                <el-date-picker
                    v-model="query.dataRange"
                    class="search-from"
                    type="datetimerange"
                    style="width: 220px"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-button type="primary" @click="getList">搜索</el-button>
                            <el-button type="success" @click="exportData()">导出</el-button>
                <el-button type="warning" class="handle-del mr10" @click="aImport">导入</el-button>
                <el-button type="text" class="handle-del mr10" @click="exportData2">下载导入模板</el-button>
                <input type="file" ref="upload" accept=".xls, .xlsx" @change="importData($event)" class="outputlist_upload" style="display:none" value="导入" />
            </div>
            <div v-if="!fromData.length" class="noData">
                暂无数据
            </div>
            <div v-else>
                <el-card class="box-card" style="margin: 10px 0" v-for="(item, index) in fromData" :key="index">
                    <div slot="header" class="clearfix">
                        <span>订单号：{{ item.orderNo }}</span>
                        <div>
                            <el-button type="text" @click="changeShow(index)">{{ item.showGoods ? '收起' : '展开' }}商品</el-button>
                            <el-button type="text" @click="searchDetail(item)">订单详情</el-button>
                        </div>
                    </div>
                    <el-form label-position="left" label-width="80px" :model="fromItem">
                        <div style="display: flex">
                            <el-form-item label="会员账号:" class="from-item">
                                {{ item.mobile }}
                            </el-form-item>
                            <el-form-item label="收件人:" class="from-item">
                                {{ item.name }}
                            </el-form-item>
                            <el-form-item label="收件人电话:" label-width="90px" class="from-item">
                                {{ item.phone }}
                            </el-form-item>
                        </div>
                        <div style="display: flex">
                            <el-form-item label="支付时间:" class="from-item">
                                {{ item.paymentOn }}
                            </el-form-item>
                            <el-form-item label="订单类别:" class="from-item">
                                <span v-if="item.orderCategory == 10">礼包</span>
                                <span v-if="item.orderCategory == 20">商品</span>
                                <span v-if="item.orderCategory == 30">补货</span>
                                <span v-if="item.orderCategory == 40">单品</span>
                            </el-form-item>
                            <el-form-item label="支付类别:" class="from-item">
                                <span v-if="item.payCategory == 10">余额</span>
                                <span v-if="item.payCategory == 20">微信</span>
                            </el-form-item>
                        </div>
                        <div style="display: flex">
                            <el-form-item label="付款现金:" class="from-item">
                                {{ item.finishCashAmount }}
                            </el-form-item>
                            <el-form-item label="付款积分:" class="from-item">
                                {{ item.finishScoreAmount }}
                            </el-form-item>
                            <el-form-item label="下单时间:" class="from-item">
                                {{ item.createdOn }}
                            </el-form-item>
                        </div>
                        <div style="display: flex">
                            <el-form-item label="收件地址:" class="from-item">
                                {{ item.address }}
                            </el-form-item>
                        </div>
                        <el-form-item label="商品列表:" class="from-item" v-if="item.showGoods"></el-form-item>
                        <el-table :data="item.list" border v-if="item.showGoods" style="margin: 0 10px; box-sizing: border-box">
                            <el-table-column prop="date" label="缩略图" align="center" width="80">
                                <template slot-scope="scope">
                                    <el-image
                                        style="width: 50px; height: 50px"
                                        :src="scope.row.thumbnail"
                                        :preview-src-list="[scope.row.thumbnail]"
                                    >
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="commodityName" align="center" label="商品名称"> </el-table-column>
                            <el-table-column prop="standardName" align="center" label="规格名称"> </el-table-column>
                            <el-table-column prop="count" align="center" label="数量"> </el-table-column>
                        </el-table>
                    </el-form>
                </el-card>
            </div>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="详情" :visible.sync="senInfoShow" width="80%">
            <el-form ref="send" :model="senInfo" label-width="80px">
                <div style="display: flex">
                    <el-form-item label="会员账号:" class="from-item">
                        {{ senInfo.mobile }}
                    </el-form-item>
                    <el-form-item label="收件人:" class="from-item">
                        {{ senInfo.name }}
                    </el-form-item>
                    <el-form-item label="收件人电话:" label-width="90px" class="from-item">
                        {{ senInfo.phone }}
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="支付时间:" class="from-item">
                        {{ senInfo.paymentOn }}
                    </el-form-item>
                    <el-form-item label="订单类别:" class="from-item">
                        <span v-if="senInfo.orderCategory == 10">礼包</span>
                        <span v-if="senInfo.orderCategory == 20">商品</span>
                        <span v-if="senInfo.orderCategory == 30">补货</span>
                        <span v-if="senInfo.orderCategory == 40">单品</span>
                    </el-form-item>
                    <el-form-item label="支付类别:" class="from-item">
                        <span v-if="senInfo.payCategory == 10">余额</span>
                        <span v-if="senInfo.payCategory == 20">微信</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="订单状态:" class="from-item">
                        <span v-if="senInfo.orderStatus == 10">创建</span>
                        <span v-if="senInfo.orderStatus == 20">系统取消</span>
                        <span v-if="senInfo.orderStatus == 30">买家取消</span>
                        <span v-if="senInfo.orderStatus == 40">退货待审批</span>
                        <span v-if="senInfo.orderStatus == 50">已退货</span>
                        <span v-if="senInfo.orderStatus == 90">交易完成</span>
                    </el-form-item>
                    <el-form-item label="支付状态:" class="from-item">
                        <span v-if="senInfo.paymentStatus == 10">待支付</span>
                        <span v-if="senInfo.paymentStatus == 20">已支付</span>
                        <span v-if="senInfo.paymentStatus == 30">已退款</span>
                    </el-form-item>
                    <el-form-item label="物流状态:" class="from-item">
                        <span v-if="senInfo.logisticsStatus == 10">待发货</span>
                        <span v-if="senInfo.logisticsStatus == 20">平台已发货</span>
                        <span v-if="senInfo.logisticsStatus == 30">物流已发货</span>
                        <span v-if="senInfo.logisticsStatus == 40">已签收</span>
                        <span v-if="senInfo.logisticsStatus == 50">自提</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="粮票兑换商品:" label-width="100px" class="from-item">
                        {{ senInfo.saltName }}
                    </el-form-item>
                    <el-form-item label="运费:" class="from-item">
                        {{ senInfo.logisticsFee }}
                    </el-form-item>
                    <el-form-item label="快递公司编码:" label-width="100px" class="from-item">
                        {{ senInfo.logisticsCode }}
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="运单号:" class="from-item">
                        {{ senInfo.waybillNo }}
                    </el-form-item>
                    <el-form-item label="发货时间:" class="from-item">
                        {{ senInfo.finishOn }}
                    </el-form-item>
                    <el-form-item label="下单时间:" class="from-item">
                        {{ senInfo.createdOn }}
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="付款现金:" class="from-item">
                        {{ senInfo.finishCashAmount }}
                    </el-form-item>
                    <el-form-item label="付款积分:" class="from-item">
                        {{ senInfo.finishScoreAmount }}
                    </el-form-item>
                    <el-form-item label="收件地址:" class="from-item">
                        <span style="">{{ senInfo.address }}</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                </div>
                <el-form-item label="商品列表:" class="from-item"></el-form-item>
                <el-table :data="senInfo.list" border style="margin: 0 10px; box-sizing: border-box">
                    <el-table-column prop="date" label="缩略图" align="center" width="80">
                        <template slot-scope="scope">
                            <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.thumbnail"
                                :preview-src-list="[scope.row.thumbnail]"
                            >
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="commodityName" align="center" label="商品名称"> </el-table-column>
                    <el-table-column prop="standardName" align="center" label="规格名称"> </el-table-column>
                    <el-table-column prop="count" align="center" label="数量"> </el-table-column>
                </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sureSend">发货</el-button>
            </span>
        </el-dialog>
        <el-dialog title="发货" :visible.sync="fahuo" width="400">
            <el-form :model="fahuoFrom">
                <el-form-item label="快递:" class="from-item">
                    <el-select v-model="fahuoFrom.logisticsCode">
                        <el-option label="圆通速递" value="yuantong"></el-option>
                        <el-option label="韵达快递" value="yunda"></el-option>
                        <el-option label="中通快递" value="zhongtong"></el-option>
                        <el-option label="申通快递" value="shentong"></el-option>
                        <el-option label="百世快递" value="huitongkuaidi"></el-option>
                        <el-option label="顺丰速运" value="shunfeng"></el-option>
                        <el-option label="邮政快递包裹" value="youzhengguonei"></el-option>
                        <el-option label="京东物流" value="jd"></el-option>
                        <el-option label="EMS" value="ems"></el-option>
                        <el-option label="极兔速递" value="jtexpress"></el-option>
                        <el-option label="邮政标准快递" value="youzhengbk"></el-option>
                        <el-option label="德邦" value="debangwuliu"></el-option>
                        <el-option label="德邦快递" value="debangkuaidi"></el-option>
                        <el-option label="优速快递" value="youshuwuliu"></el-option>
                        <el-option label="宅急送" value="zhaijisong"></el-option>
                        <el-option label="圆通快运" value="yuantongkuaiyun"></el-option>
                        <el-option label="众邮快递" value="zhongyouex"></el-option>
                        <el-option label="百世快运" value="baishiwuliu"></el-option>
                        <el-option label="顺丰快运" value="shunfengkuaiyun"></el-option>
                        <el-option label="中通快运" value="zhongtongkuaiyun"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运单号:" class="from-item" style="margin:20px 10px">
                        <el-input style="width:200px" placeholder="运单号" v-model="fahuoFrom.waybillNo"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sureSend2">确定发货</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryUnDeliver, QueryInfo, Export, Import, Deliver } from '@/api/agent'
import XLSX from 'xlsx'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      query: {
        pageIndex: 1,
        pageSize: 20,
        dataRange: ''
      },
      fahuo: false,
      fahuoFrom: {},
      senInfo: {
        amount: ''
      },
      senInfo2: {
        amount: ''
      },
      senInfoShow2: false,
      senInfoShow: false,
      pageTotal: 0,
      fromItem: {},
      fromData: [],
      exportFrom: {}
    }
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    aImport () {
      this.$refs.upload.click()
    },
    importData (e) {
      var that = this
      const files = e.target.files
      const fileReader = new FileReader()
      console.log(e)
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0] // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          // console.log(ws, 'ws')
          const list = []
          const filterVal = ['orderNo', 'logisticsCode', 'waybillNo']
          const tHeader = ['订单号', '快递公司编号', '运单号']
          ws.map((item) => {
            ;
            const obj = {}
            Object.keys(item).map((v, index) => {
              // console.log(this.tHeader.indexOf(v))
              obj[filterVal[tHeader.indexOf(v)]] = item[v]
              console.log(obj)
            })
            list.push(obj)
          })
          // console.log(list)
          Import({ list: list }).then(resp => {
            if (resp.RequestStatus == 200) {
              this.$message.success('导入成功')
              this.getList()
              this.$refs.upload.value = ''
            } else {
              this.$message.error(resp.Message)
            }
          })
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    },
    changeSheng (e) {
      console.log(e)
      // this.query.provinceCode = e.pcode
      // this.cityList = e.cityList
      this.query.cityCode = ''
      this.proList.map((item, index) => {
        if (item.pid == e) {
          this.cityList = item.cityList
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]))
    },
    exportData2 () {
      const { export_json_to_excel } = require('../../utils/Export2Excel.js')
      const tHeader = ['订单号', '快递公司编号', '运单号']
      // console.log(tHeader)
      // const list = res.Data.list;
      // const data = this.formatJson(tHeader, list);
      export_json_to_excel(tHeader, [], '导入模板')
    },
    exportData () {
      const data = {
        orderCategory: this.query.orderCategory,
        orderNo: this.query.orderNo,
        name: this.query.name,
        phone: this.query.phone,
        parentMobile: this.query.parentMobile
      }
      data.beginPaymentOn = this.query.dataRange[0]
      data.endPaymentOn = this.query.dataRange[1]

      Export(data).then((res) => {
        console.log(res, data)
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../utils/Export2Excel.js')
          const tHeader = Object.keys(res.Data.list[1])
          console.log(tHeader)
          const list = res.Data.list
          const data = this.formatJson(tHeader, list)
          export_json_to_excel(tHeader, data, '订单列表')
        })
      })
    },
    pageChange (e) {
      this.query.pageIndex = e
      this.getList()
    },
    getList () {
      const data = JSON.parse(JSON.stringify(this.query))
      console.log(data.dataRange)
      data.payOnBegin = data.dataRange ? data.dataRange[0] + ' 00:00:00' : ''
      data.payOnEnd = data.dataRange ? data.dataRange[1] + ' 23:59:59' : ''
      QueryUnDeliver(data).then((res) => {
        this.fromData = res.Data.list.map((item) => {
          item.showGoods = false
          return item
        })
        this.pageTotal = res.Data.paging.totalItemCount
      })
    },
    changeShow (index) {
      this.fromData[index].showGoods = !this.fromData[index].showGoods
    },
    sizeChange (e) {
      this.query.pageSize = e
      this.getList()
    },
    searchDetail (info) {
      //   console.log(info)
      QueryInfo({ id: info.id }).then((res) => {
        //   console.log(res)
        if (res.RequestStatus == 200) {
          this.senInfo = res.Data
          this.fahuoFrom.orderNo = res.Data.orderNo
          this.fahuoFrom.waybillNo = res.Data.waybillNo
          this.senInfoShow = true
        } else {
          this.$message.error(res.Message)
        }
      })
    },
    deleteDetail (info) {
      this.senInfo2 = JSON.parse(JSON.stringify(info))
      this.senInfoShow2 = true
    },
    sureSend2 () {
      Deliver(this.fahuoFrom).then((res) => {
        //   console.log(res)
        if (res.RequestStatus == 200) {
          this.$message.success('成功')
          this.getList()
          this.fahuo = false
        }
      })
    },
    sureSend () {
      this.fahuo = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    console.log(123)
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  ctivated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
